<template>
    <view class="page savepadding">
        <view class="card" style="margin-top: 20upx;">
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">车系</text>
                    <text class="title1-icon">*</text>
                </view>
                <view class="right">
                    <text>{{brandName}} {{seriesName}}</text>
                    <!-- <u-icon name="arrow-right"></u-icon> -->
                </view>
            </view>
			<view class="line"></view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">车型</text>
                    <text class="title1-icon">*</text>
                </view>
                <view class="right">
                    <text>{{modelName}}</text>
                    <!-- <u-icon name="arrow-right"></u-icon> -->
                </view>
            </view>
			<view class="line"></view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">姓名</text>
                    <text class="title1-icon">*</text>
                </view>
                <view class="right">
                    <!-- <text>{{formData.contact}}</text> -->
                    <u--input v-model="formData.contact" :customStyle="{'padding-right':'0'}" inputAlign="left" placeholder="请输入"></u--input>
                </view>
            </view>
			<view class="line"></view>
            <view class="list">
                <view class="label">
                    <text style="white-space: nowrap;">联系电话</text>
                    <text class="title1-icon">*</text>
                </view>
                <view class="right">
                    <!-- <text>{{formData.phone}}</text> -->
                    <u--input v-model="formData.phone" :customStyle="{'padding-right':'0'}" inputAlign="left"></u--input>
                </view>
            </view>
        </view>
		<scroll-view scroll-y  @scrolltolower="getStore">
			<view v-if="storeList.length > 0">
				<view class="card-title">
					<view class='title'>预约门店</view>
					<view class='value' v-for="(item,index) in storeList" :key='index' @click='slesctStore(item)' :class="storeId==item.storeId?'selset-title':''">
						<view class='value-store'>{{item.storeName}}</view>
						<view class='value-adress'>{{item.contactAddress}}</view>
						<view class="pay-info-right">
							<view class="phone_stl" @click.stop="callPhone()">
									<text class="phone_stl_text">致电商家</text>	
							</view>
						</view>
					</view>
					
				</view>
	
				<u-loadmore :status="loadStatus[1]" @loadmore="getStore"></u-loadmore>
			</view>
	
			<no-data v-if="storeList.length === 0"></no-data>
	
		</scroll-view>
		
		
       

        <!-- 底部按钮 -->
		<view class='button-box'>
			<view class="bottom-button" :class="isIos?'bottom3':''" @click="submit">提交</view>
		</view>
        
		<view v-show='isPhone' class='phoneSty'>手机号为空!</view>
    </view>
</template>

<script>
import * as HomeApi from '@/common/apis/home-api';
import * as loginApi from '@/common/apis/login-api';


export default {
    components: {
     
    },
    data() {
        return {
            formData: {
                token: "",
                contact: "", // 联系人
                phone: "", // 手机号
                modelId: "", // 车型id
                reserveContent: "询问价格", // 备注
                reserveContent: "询问价格", // 备注
            },
            brandName: "",  // 品牌名称
            seriesName: "",  // 车系名称
            modelName: "",  // 车型名称
			isPhone:false,
			storeList:[],
			loadStatus: ['loadmore', 'loadmore'],
			wiperCurrent: 1,
			storeId:'',
			isIos:false,
        }
    },
    computed: {
        openid() {
            return this.$store.state.user.openid;
        },
        userInfo() {
            return this.$store.state.user.userInfo;
        },
    },
    onLoad(op) {
        this.formData.token = this.openid; // 默认传用户openid
        this.formData.contact = this.userInfo.nickName; // 联系人
        this.formData.phone = this.userInfo.phone; // 手机号
        this.formData.modelId = op.modelId; // 车型id
        this.formData.schemeId = op.schemeId; // 车型id
        this.brandName = op.brandName; // 品牌名称
        this.seriesName = op.seriesName; // 车系名称
        this.modelName = op.modelName; // 车型名称
		this.pageNo = 1
		this.getStore();
    },
	onShow(){
		const type = uni.getStorageSync('modelType')
		if(type=='iphone'){
			this.isIos = true
		}else{
			this.isIos = false
		}
	},
    methods: {	
		// 选中门店
		slesctStore(info){
			this.storeId = info.storeId
		},
		getStore() {
			loginApi.storelist({
				pageNo: this.pageNo,
				pageSize: 10,
				cityCode: uni.getStorageSync('cityCode')?uni.getStorageSync('cityCode'):110000,
			}).then(res => {
				if (this.pageNo == 1) {
					this.storeList = [];
					this.pageNo++;
				
					this.loadStatus[1] = 'loadmore';
				
				} else {
					if (!uni.$u.test.isEmpty(res)) {
						this.pageNo++;
				
						this.loadStatus[1] = 'loadmore';
					} else {
						this.loadStatus[1] = 'nomore';
					}
				}
				
				this.storeList = this.storeList.concat(res);
				
			})
		},
		callPhone() {
			
			if(this.phone){
				// #ifdef H5
				window.flutter_inappwebview.callHandler("callPhoneChannel", {
					phone: this.phone,
				  });
				// #endif
				// #ifndef H5
					uni.makePhoneCall({
						phoneNumber: this.phone,
						success: (res) => {
						}
					})
				// #endif
			}else{
				this.isPhone = true
				setTimeout(()=>{
					this.isPhone = false
				},2000)
			}
			
		},
        async submit() {
            if (!/^1[3456789]\d{9}$/.test(this.formData.phone)){
                uni.showToast({
                    title: '手机号错误',
                    icon: 'error',
                    duration: 2000
                });
                return;
            }

			if(uni.$u.test.isEmpty(this.formData.contact)){
				uni.showToast({
					title:'请输入姓名',
					icon:'error'
				})
				return;
			}
			if(uni.$u.test.isEmpty(this.storeId)){
				uni.showToast({
					title:'请选择门店',
					icon:'error'
				})
				return;
			}
			

            try {
				let param = {...this.formData,...{storeId:this.storeId}}
                const result = HomeApi.cluessourcedriver(param);
                uni.showToast({ title: '提交成功', icon: 'success' });
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000);
                return result;
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },

    }
}
</script>

<style lang="scss" scoped>
.selset-title{
	border:1px solid #173B42;
	border-radius: 8upx;
}
.pay-info-right{
	width: 100%;
	display: flex;
	justify-content:flex-end;
}
.phone_stl{
	padding:8px 16px;
	background-color: #173B42 ;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.phone_stl_text{
	min-width:30px;
	color:#fff;
	font-size: 24upx;
}
.phoneSty{
	position: fixed;
	top:40%;
	left:36%;
	width: 192upx;
	height:44upx ;
	background-color:#000000 ;
	color:#ffffff;
	padding:24upx 32upx;
	text-align: center;
	line-height: 44upx;
	border-radius: 8upx;
}
.title1-icon{
	color:#FF6A15;
}
.line {
	margin:32upx 0upx 32upx;
	border-bottom: 1px solid #F8F8F8;
}
.page {
    padding: 32upx;
    padding-bottom: 100upx;
}
.card {
    padding: 32upx 36upx;
    background: #fff;
    border-radius: 16upx;
    margin-bottom: 45upx;
}

.list {
    display: flex;
    justify-content: start;
	align-items: center;
    font-size: 28upx;
    font-weight: bold;
    color: #333;
	height: 50upx;
	align-items: center;
    // margin-bottom: 27upx;

    .right {
        display: flex;
    }

	.label{
		display: flex;
		align-items: center;
	}
}

.card-title {
    background-color: #ffffff;
	border-radius: 8upx;
	padding:32upx;
	
	.title{
		color:#000000;
		font-size: 32upx;
		font-weight: bold;
		margin-bottom: 24upx;
	}
	.value{
		padding: 32upx;
		background-color:#F8F8F8 ;
		margin-bottom: 24upx ;
		.value-store{
			color:#000000;
			font-size: 32upx;
			margin-bottom: 14upx;
		}
		.value-adress{
			color:#666666;
			font-size: 24upx;
			margin-bottom: 28upx;
		}
	}
}

.title {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 19upx;
}

.desc {
    font-size: 24upx;
    color: #999;
    margin-bottom: 30upx;
}

.distance {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    text {
        color: #999;
        margin-right: 10upx;
    }
}

.icons {
    display: flex;
    width: 200upx;
    justify-content: space-between;
}
.button-box{
	position: fixed;
	bottom: 0;
	left:0;
	background-color: #ffffff;
	width: 100%;
	height:200upx;
	.bottom-button {
	    width: 90%;
		position: fixed;
		bottom: 32upx;
		left:5%;
		transform: -50%;
		background: #173B42;
	    line-height: 96upx;
	    z-index:2;
	    text-align: center;
	    color: #fff;
		font-size: 16px;
		border-radius: 4px;
	}
	.bottom3{
		position:absolute;
		bottom: 70upx;
	}
}


</style>
